<!--
 * @Author: your name
 * @Date: 2020-06-04 15:49:32
 * @LastEditTime: 2020-06-16 17:21:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \IM_Web\im_web\src\components\attestCompany\attestCompany.vue
--> 
<template>
    <div class="attestCompany">
        <div class="company_name">{{item.full_name}}</div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" v-if="isShow">
            <div class="flex align_center">
                <div class="star"></div>
                <FormItem prop="personName">
                    <iInput type="text" v-model="formInline.personName" placeholder="输入法人姓名"></iInput>
                </FormItem>
            </div>
            <div class="flex align_center">
                <div class="star"></div>
                <FormItem prop="addressName">
                    <iInput type="text" v-model="formInline.addressName" placeholder="输入联系人姓名"></iInput>
                </FormItem>
            </div>
            <div class="flex align_center">
                <div class="star"></div>
                <FormItem prop="addressTel">
                    <iInput type="text" v-model="formInline.addressTel" placeholder="输入联系人电话"></iInput>
                </FormItem>
            </div>
            <div class="flex align_center">
                <div class="star"></div>
                <FormItem prop="email">
                    <iInput type="email" v-model="formInline.email" placeholder="输入邮箱"></iInput>
                </FormItem>
            </div>
            <div class="flex justify_between">
                <div>
                    <div class="flex align_center" style="margin-bottom:13px;">
                        <div class="star"></div>
                        <div>上传营业执照</div>
                    </div>
                    <Upload @set-img="setImg" type="license" :imgurl="licenseImgUrl" />
                </div>
                <div>
                    <div class="flex align_center" style="margin-bottom:13px;">
                        <div class="star"></div>
                        <div>上传授权证书</div>
                    </div>
                    <Upload @set-img="setImg" type="authorize" :imgurl="authorizeImgUrl" />
                    <div
                        class="download"
                        @click="handleDownload('url', 'fileName', 'mime')"
                    >下载授权认证书模板</div>
                </div>
            </div>
            <FormItem>
                <div class="flex align_center">
                    <Button
                        type="primary"
                        @click="handleSubmit('formInline')"
                        class="refer"
                        :loading="btnLoading"
                    >提交认证</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import Upload from "../upload/upload";
import axios from "axios";
export default {
    name: "attestCompany",
    props: {
        item: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            licenseImgUrl: "",
            authorizeImgUrl: "",
            enterprise_id: "",
            btnLoading: false,
            isShow: false,
            formInline: {
                personName: "",
                addressName: "",
                addressTel: "",
                email: ""
            },
            ruleInline: {
                personName: [
                    {
                        required: true,
                        message: "请输入法人姓名",
                        trigger: "blur"
                    }
                ],
                addressName: [
                    {
                        required: true,
                        message: "请输入联系人姓名",
                        trigger: "blur"
                    }
                ],
                addressTel: [
                    {
                        required: true,
                        message: "请输入联系人电话",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        required: true,
                        message: "请输入邮箱",
                        trigger: "blur"
                    },
                    {
                        type: "email",
                        message: "请输入正确的邮箱",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {},
    created() {
        this.authorizeDetail();
    },
    mounted() {},
    watch: {},
    methods: {
        handleSubmit(name) {
            this.$Message.destroy();
            if (this.licenseImgUrl === "") {
                this.$Message.error("请上传营业执照");
                return;
            }
            if (this.authorizeImgUrl === "") {
                this.$Message.error("请上传授权证书");
                return;
            }
            this.btnLoading = true;
            this.$refs[name].validate(valid => {
                if (valid) {
                    console.log(this.item);
                    let params = {
                        enterprise_id: this.item.enterprise_id,
                        legal_person: this.formInline.personName,
                        contact_name: this.formInline.addressName,
                        contact_mobile: this.formInline.addressTel,
                        email: this.formInline.email,
                        business_license: this.licenseImgUrl,
                        certificate: this.authorizeImgUrl
                    };
                    this.http.companyAttest(params).then(res => {
                        console.log(res);
                        this.btnLoading = false;
                        res.data.errno === "000"
                            ? this.$Message.success(res.data.errmsg)
                            : this.$Message.error(res.data.errmsg);
                    });
                    this.$Message.success("Success!");
                }
            });
        },
        setImg(params) {
            console.log(params);
            if (params.type) {
                this.licenseImgUrl = params.url;
            } else {
                this.authorizeImgUrl = params.url;
            }
        },
        // 下载按钮点击事件
        handleDownload(url, fileName, mime) {
            // 下载附件
            axios
                .get(url, { responseType: "blob" })
                .then(res => {
                    let blob = new Blob([res.data], { type: mime });
                    // 注: mime类型必须整正确, 否则下载的文件会损坏
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        // 兼容IE
                        // window.navigator.msSaveOrOpenBlob(
                        //     blob,
                        //     element.original_name
                        // );
                        console.log("IE");
                    } else {
                        let downloadElement = document.createElement("a");
                        downloadElement.href = window.URL.createObjectURL(blob); // 创建一个DOMString
                        downloadElement.download = fileName;
                        downloadElement.click();
                        window.URL.revokeObjectURL(blob); // 释放 DOMString  ,解除内存占用
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        },
        authorizeDetail() {
            // companyAuthDetail
            let params = {
                enterprise_id: this.item.enterprise_id
            };
            this.http.companyAuthDetail(params).then(res => {
                console.log(res);
                this.isShow = true;
                if (res.data.errno === "000") {
                    this.formInline.personName =
                        res.data.result.data.legal_person;
                    this.formInline.addressName =
                        res.data.result.data.contact_name;
                    this.formInline.addressTel =
                        res.data.result.data.contact_mobile;
                    this.formInline.email = res.data.result.data.email;
                    this.licenseImgUrl =
                        res.data.result.data.thumb_business_license;
                    this.authorizeImgUrl =
                        res.data.result.data.thumb_certificate;
                }
            });
        }
    },
    destroyed(){
         this.isShow = false;
    },
    components: {
        Upload
    }
};
</script>
<style>
.attestCompany .ivu-input {
    width: 580px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    background: rgba(247, 246, 246, 1);
    border-radius: 10px;
    border: 0;
    padding: 0 27px;
    box-sizing: border-box;
}
</style>
<style scoped lang="less">
.attestCompany {
    width: 622px;
    margin: 0 auto;
    padding-top: 35px;
    box-sizing: border-box;
    .company_name {
        padding-left: 43px;
        box-sizing: border-box;
        margin-bottom: 25px;
    }
    .star {
        width: 24px;
        height: 24px;
        background: url("../../assets/images/index/icon_must@2x.png");
        background-size: 100% 100%;
        margin-right: 19px;
    }
    .download {
        width: 220px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #999999;
        background: rgba(238, 238, 238, 1);
        text-align: center;
        border-radius: 15px;
        margin-top: 10px;
        cursor: pointer;
    }
    .refer {
        width: 237px;
        height: 49px;
        background: rgba(35, 150, 247, 1);
        border-radius: 24px;
        font-size: 21px;
        color: #fff;
        margin: 0 auto;
        margin-top: 40px;
    }
}
</style>
